<div class="subsection floatleft">
    <h3 class="title">Login</h3>
    <label for="Username">Username <span class="red">*</span></label><br />
    <input type="text" id="Username" name="Username" class="large" ng-model="settings.Username"/><br />
    <label for="Password">Password <span class="red">*</span></label><br />
    <input type="password" id="Password" name="Password" class="large" ng-model="settings.Password"/><br />
    <label for="Server">Server <span class="red">*</span></label><br />
    <input type="text" id="Server" name="Server" class="xlarge" title="SMS Server URL" ng-model="settings.Server"/><br />
    <label for="SMStats">Audio State: <span id="SMStats"></span></label><br /><br />
    <br />
</div>
<div class="subsection floatleft">
    <h3 class="title">Options</h3>
    <label for="MediaBrowserListSize">Media Browser List Size</label><br />
    <input type="text" id="MediaBrowserListSize" name="MediaBrowserListSize" class="large" title="Number of elements to display in the media browser." ng-model="settings.MediaBrowserListSize"/><br />
    <label for="AutoPlaylistSize">Auto Playlist Size</label><br />
    <input type="text" id="AutoPlaylistSize" name="AutoPlaylistSize" class="large" title="Number of Tracks to Get on the Playlist tab" ng-model="settings.AutoPlaylistSize"/><br />
</div>
<div class="subsection floatleft checkboxes">
    <div class="checkboxes">
        <fieldset id="General">
        <legend class="aligncenter">General</legend>
        <div class="inputwrap"><input type="checkbox" id="LoopQueue" name="LoopQueue" value="1" title="When the Queue has ended, start from beginning" ng-model="settings.LoopQueue"/></div>
        <label for="LoopQueue">Loop Queue</label>
        <div class="clear"></div>
        <div class="inputwrap"><input type="checkbox" id="HideAZ" name="HideAZ" value="1" title="Hide A-Z Artist Picker (Tablet/Touch friendly feature)" ng-model="settings.HideAZ"/></div>
        <label for="HideAZ">Hide A-Z</label>
        <div class="clear"></div>
        <div class="inputwrap"><input type="checkbox" id="ScrollTitle" name="ScrollTitle" value="1" title="Scroll the Title Once" ng-model="settings.ScrollTitle"/></div>
        <label for="ScrollTitle">Scroll Title</label>
        <div class="clear"></div>
        <label for="DefaultLibraryLayout">Default Library Layout</label>
        <div class="clear"></div>
        <select id="DefaultLibraryLayout" name="DefaultLibraryLayout" class="" ng-model="settings.DefaultLibraryLayout" ng-options="o.id as o.name for o in LibraryLayouts" title="AJAX Request Library Layout"></select>
        <div class="clear"></div>
        </fieldset>
        <div class="clear"></div>
        <fieldset id="HTML5">
        <legend class="aligncenter">HTML5 [Beta]</legend>
        <span>Notifications</span><br />
        <div class="clear"></div>
        <div class="inputwrap"><input type="checkbox" id="NotificationTrack" name="NotificationTrack" value="1" title="Enable Notifications When Tracks Change" ng-model="settings.NotificationTrack"/></div>
        <label for="NotificationTrack">Track Change</label>
        <div class="clear"></div>
        <div class="inputwrap"><input type="checkbox" id="NotificationNowPlaying" name="NotificationNowPlaying" value="1" title="Show What Other Users Are Playing" ng-model="settings.NotificationNowPlaying"/></div>
        <label for="NotificationNowPlaying">Now Playing</label>
        <div class="clear"></div>
        <span>Local Storage</span><br />
        <div class="clear"></div>
        <div class="inputwrap"><input type="checkbox" id="SaveTrackPosition" name="SaveTrackPosition" value="1" title="Saves Play Queue & Track Position Periodically (Uses HTML5: localStorage)" ng-model="settings.SaveTrackPosition"/></div>
        <label for="SaveTrackPosition">Save Progress</label>
        </fieldset>
    </div>
</div>
<div class="subsection floatleft">
    <div class="checkboxes">
        <fieldset id="Advanced">
        <legend class="aligncenter">Advanced</legend>
        <div class="inputwrap"><input type="checkbox" id="Debug" name="Debug" value="1" title="Enable Debug Mode (Events will be logged to the Javascript Console)" ng-model="settings.Debug"/></div>
        <label for="Debug">Debug Mode</label>
        <div class="clear"></div>
        <div class="inputwrap"><input type="checkbox" id="ForceFlash" name="ForceFlash" value="1" title="Force Flash Plugin for Audio (Option doesn't work with Chrome App)" ng-model="settings.ForceFlash"/></div>
        <label for="ForceFlash">Force Flash</label>
        <div class="clear"></div>
        <label for="Timeout">Timeout</label>
        <div class="clear"></div>
        <select id="Timeout" name="Timeout" class="" ng-model="settings.Timeout" ng-options="o.id as o.name for o in Timeouts" title="AJAX Request Timeout (Seconds)"></select>
        <div class="clear"></div>
        <label for="NotificationTimeout">Notification Timeout</label>
        <div class="clear"></div>
        <select id="NotificationTimeout" name="NotificationTimeout" class="" ng-model="settings.NotificationTimeout" ng-options="o.id as o.name for o in Timeouts" title="Notification Timeout (Seconds)"></select>
        <div class="clear"></div>
        <label for="Protocol">Protocol</label><br />
        <select id="Protocol" name="Protocol" class="" ng-model="settings.Protocol" ng-options="o for o in Protocols" title="Enable Cross-Domain AJAX Requests (Use if hosted in a different domain than SMS)"></select>
        </fieldset>
    </div>
</div>
<div class="clear"></div>
<div class="submit"><a href="" class="button" ng-click="save()" title="Save Settings">Save</a></div>
